<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑站点</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="站点设置" name="first">
						<div class="tab-content">
							<el-form-item label="是否启用">
								<el-switch :active-value="0" :inactive-value="1" v-model="model.status"></el-switch>
							</el-form-item>
							<el-form-item label="是否默认">
								<el-switch :active-value="1" :inactive-value="0" v-model="model.isDefault"></el-switch>
							</el-form-item>
							<el-form-item prop="name" label="站点标识">
								<el-input v-model="model.name" placeholder="英文字母,站点URL路由标识"></el-input>
							</el-form-item>
							<el-form-item prop="dirPath" label="模板目录名">
								<el-input v-model="model.dirPath" placeholder="对应模板目录名"></el-input>
							</el-form-item>
							<el-form-item prop="sortId" label="排序数字">
								<el-input v-model="model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="网站信息" name="info">
						<div class="tab-content">
							<el-form-item prop="title" label="网站标题">
								<el-input v-model="model.title" placeholder="任意字符，255个字符内"></el-input>
							</el-form-item>
							<el-form-item label="网站LOGO">
								<dt-upload v-model="model.logo"></dt-upload>
							</el-form-item>
							<el-form-item label="单位名称">
								<el-input v-model="model.company"></el-input>
							</el-form-item>
							<el-form-item label="单位地址">
								<el-input v-model="model.address"></el-input>
							</el-form-item>
							<el-form-item label="联系电话">
								<el-input v-model="model.tel" placeholder="非必填，区号+电话号码"></el-input>
							</el-form-item>
							<el-form-item label="传真号码">
								<el-input v-model="model.fax" placeholder="非必填，区号+传真号码"></el-input>
							</el-form-item>
							<el-form-item label="电子邮箱">
								<el-input v-model="model.email"></el-input>
							</el-form-item>
							<el-form-item label="网站备案号">
								<el-input v-model="model.crod"></el-input>
							</el-form-item>
							<el-form-item label="首页SEO标题">
								<el-input v-model="model.seoTitle" placeholder="自定义的首页标题"></el-input>
							</el-form-item>
							<el-form-item label="页面关健词">
								<el-input v-model="model.seoKeyword" placeholder="页面关键词(keyword)"></el-input>
							</el-form-item>
							<el-form-item label="页面描述">
								<el-input v-model="model.seoDescription" placeholder="页面描述(description)"></el-input>
							</el-form-item>
							<el-form-item label="版权信息">
								<el-input type="textarea" :rows="3" v-model="model.copyright" maxlength="1024" show-word-limit></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="绑定域名" name="domain">
						<div class="tab-content">
							<el-row>
								<el-col :span="24">
									<el-button type="primary" size="small" icon="el-icon-plus" @click="addDomain">添加</el-button>
									<el-button type="danger" size="small" icon="el-icon-delete" @click="removeDomain">删除</el-button>
								</el-col>
							</el-row>
							<el-card class="table-card" style="margin-top:20px;">
								<el-table ref="domainTable" :data="model.domains" style="width:100%;" @selection-change="handleSelectionChange">
									<el-table-column type="selection" width="55"></el-table-column>
									<el-table-column width="280" label="域名">
										<template slot-scope="scope">
											<el-form-item :prop="'domains.' + scope.$index + '.domain'" :rules='rules.domain' label-width="auto" style="margin:auto">
												<el-input size="mini" v-model="scope.row.domain" placeholder="不含http://部分"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column min-width="180" label="备注">
										<template slot-scope="scope">
											<el-form-item :prop="'domains.' + scope.$index + '.remark'" label-width="auto" style="margin:auto">
												<el-input size="mini" v-model="scope.row.remark"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column fixed="right" width="80" label="操作" align="center">
										<template slot-scope="scope">
											<el-link icon="el-icon-delete" @click="deleteDomain(scope.$index)"></el-link>
										</template>
									</el-table-column>
								</el-table>
							</el-card>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../../components/DtUpload.vue'
	
	export default {
		components: {
			DtUpload
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'first', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				multipleSelection: [],
				model: {
					id: 0,
					name: '',
					title: '',
					dirPath: '',
					isDefault: 0,
					logo: '',
					company: '',
					address: '',
					tel: '',
					fax: '',
					email: '',
					crod: '',
					copyright: '',
					seoTitle: '',
					seoKeyword: '',
					seoDescription: '',
					sortId: 99,
					status: 0,
					domains: []
				},
				rules: {
					name: [
						{ required: true, message: '请输入站点名称', trigger: 'blur' },
						{ min: 2, max: 128, message: '长度在 2 到 128 个字符', trigger: 'blur' },
						{ pattern: /^[a-zA-Z_]{1,}$/, message: '只能字母和下划线', trigger: 'blur' }
					],
					title: [
						{ required: true, message: '请输入网站标题', trigger: 'blur' },
						{ min: 2, max: 128, message: '长度在 2 到 128 个字符', trigger: 'blur' }
					],
					dirPath: [
						{ required: true, message: '请输入模板目录名', trigger: 'blur' },
						{ pattern: /^[0-9a-zA-Z_]{1,}$/, message: '只能字母数字下划线', trigger: 'blur' }
					],
					sortId: [
						{ required: true, message: '请输入排序数字', trigger: 'blur' }
					],
					domain: [
						{ required: true, message: '请填写绑定的域名', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				//赋值表单
				if (_this.id) {
					this.$api.request({
						url: '/admin/site/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						this.$api.request({
							method: 'put',
							url: '/admin/site/' + _this.model.id,
							data: _this.model,
							loading: true,
							successMsg: '修改站点已成功',
							success(res) {
								//重新加载菜单
								_this.$emit('loadMenu'); //通知父组件更新
								//跳转列表页
								_this.$common.linkUrl('/setting/site/list');
							}
						});
					} else {
						this.$api.request({
							method: 'post',
							url: '/admin/site',
							data: _this.model,
							loading: true,
							successMsg: '新增站点已成功',
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
								//重新加载菜单
								_this.$emit('loadMenu'); //通知父组件更新
							}
						});
					}
				})
			},
			//删除选中的域名
			removeDomain() {
				let _this = this; //当前页面
				let list = _this.multipleSelection; //拿到选中的数据
				if (list.length) {
					list.forEach((item, index) => {
						//遍历源数据
						_this.model.domains.forEach((v, i) => {
							//如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
							if (item == v) {
								_this.model.domains.splice(i, 1);
							}
						})
					});
				}
				//清除选中状态
				_this.$refs.domainTable.clearSelection();
			},
			//删除一行域名
			deleteDomain(index) {
				this.model.domains.splice(index, 1);
			},
			//添加域名
			addDomain() {
				this.model.domains.push({
					id: 0,
					siteId: 0,
					domain: '',
					remark: ''
				});
			},
			//选中项
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		},
		created() {
			this.initData();
		}
	}
</script>

<style lang="scss">
</style>